<template>
  <div class="mb10">
    <a-form layout="inline">
      <a-form-item>
        <a-input v-model:value="params.name" placeholder="角色名称"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="searchData">
            搜索
          </a-button>
          <a-button @click="clearSearchData">
            清空
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>

  <div class="mb10">
    <a-button type="primary" @click="addData">
      <PlusOutlined />
      新增
    </a-button>
  </div>
  <a-table 
  :columns="columns" 
  :data-source="data"
   bordered
   :pagination="{total}"
   @change="changePage"
   >
    <template #opt="{ text }">
      <a-space>
        <a-button type="primary" @click="editData(text)">
          <EditOutlined />
          修改
        </a-button>
        <a-button type="primary" @click="showData(text)">
          <EyeOutlined />
          详情
        </a-button>
        <a-button type="danger" @click="delMenu(text)">
          <DeleteOutlined />
          删除
        </a-button>
      </a-space>
    </template>
  </a-table>

  <a-drawer
    :title="title"
    placement="right"
    width="520"
    :closable="false"
    v-model:visible="visible"
  >
    <a-form
      name="custom-validation"
      :ref="setComp"
      :model="menuForm"
      :rules="rules"
      v-bind="layout"
    >
      <!--      v-bind="validateInfos.name"-->
      <a-form-item required has-feedback label="组件类型名称" name="name">
        <a-input
          v-model:value="menuForm.name"
          autocomplete="off"
          :disabled="disabled"
        />
      </a-form-item>      
      <a-form-item required has-feedback label="组件类型icon" name="name">
        <a-input
          v-model:value="menuForm.icon"
          autocomplete="off"
          :disabled="disabled"
        />
      </a-form-item>
      <a-button style="margin-right: 8px" @click="cancel">
        取消
      </a-button>
      <a-button type="primary" @click="onSubmit" v-if="!disabled">
        提交
      </a-button>
    </a-form>
  </a-drawer>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "角色名称",
    dataIndex: "name",
    key: "name",
  },  {
    title: "icon",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "操作",
    dataIndex: "",
    key: "x",
    width: 240,
    slots: { customRender: "opt" },
  },
];
import { ref, reactive, onMounted } from "vue";

import {
  getList,
  saveComponent,
  updateComponent,
  getComponentTypeDetail,
  delDetail
} from "@/api/componentType";
import { message } from "ant-design-vue";

import { useCURD } from "@/utils/hook/crudHooks";

export default {
  name: "index",
  setup() {
    const data = ref([]); // 列表数据
    const visible = ref(false); // 抽屉
    const title = ref(""); // 标题
    const menuSubmitForm = ref(null); // 表单组件
    const disabled = ref(false); // 禁用表单
    const total = ref(0)
    // 获取表单组件
    const setComp = (comp) => {
      menuSubmitForm.value = comp;
    };
    const params = reactive({
      page: 1,
      pageSize: 10,
      name: "",
    });
    // 提交的表单
    const menuForm = ref({
      name: "",
      icon: ""
    });
    // 表单的校验
    const rules = {
      name: [{ required: true, message: "请输入组件类型名称", trigger: "blur" }],
      icon: [{ required: true, message: "请输入组件类型icon", trigger: "blur" }]
    };
    // 表单样式
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    const {
      initDataHook,
      setStatus,
      addDataHook,
      onSubmitHook,
      editDataHook,
      delDataHook,
      showDataHook,
      clearSearchDataHook,
    } = useCURD();
    // 初始化数据
    onMounted(() => {
      initDataHook(getList, params, data,total);
    });

    const addData = () => {
      addDataHook(disabled);
      setStatus(visible, title, true, "新增组件类型");
    };

    const onSubmit = () => {
      if (title.value === "修改组件类型") {
        onSubmitHook(menuSubmitForm, false, menuForm, updateComponent, () => {
          message.success("修改成功");
          setStatus(visible, title, false, "");
          initDataHook(getList, params, data,total);
        });
        return;
      }
      onSubmitHook(menuSubmitForm, true, menuForm, saveComponent, () => {
        initDataHook(getList, params, data,total);
        setStatus(visible, title, false, "");
      });
    };
    const editData = (row) => {
      disabled.value = false;
      editDataHook(row, menuForm, getComponentTypeDetail, () => {
        setStatus(visible, title, true, "修改组件类型");
        initDataHook(getList, params, data,total);
      });
    };

    const showData = (row) => {
      disabled.value = true;
      showDataHook(row, menuForm, getComponentTypeDetail, () => {
        setStatus(visible, title, true, "查看组件类型");
        initDataHook(getList, params, data,total);
      });
    };
    /**
     * 删除数据
     * @param row 数据对象
     */
    const delMenu = (row) => {
      delDataHook(row, delDetail, () => {
        initDataHook(getList, params, data,total);
      });
    };
    const searchData = () => {
      initDataHook(getList, params, data,total);
    };
    const clearSearchData = () => {
      clearSearchDataHook(params, () => {
        initDataHook(getList, params, data,total);
      });
    };
    const cancel = ()=>{
      setStatus(visible, title, false, "");
    }
    const changePage = (page)=>{
        params.page = page.current
       initDataHook(getList, params, data,total);
    }
    return {
      data,
      params,
      total,
      columns,
      rules,
      title,
      visible,
      setStatus,
      layout,
      onSubmit,
      setComp,
      menuForm,
      editData,
      delMenu,
      showData,
      addData,
      disabled,
      clearSearchData,
      searchData,
      cancel,
      changePage
    };
  },
};
</script>

<style scoped></style>
